<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!-- <link rel="stylesheet" href="bootstrap-4.3.1-dist/css/bootstrap.css">
        <link rel="stylesheet" href="bootstrap-4.3.1-dist/css/bootstrap.min.css"> -->
        <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
        <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
        <script type="text/javascript" src="bootstrap-4.3.1-dist/js/bootstrap.bundle.min.js"></script>
        <style>
            .box{
                width: 100%;
                height: 700px;
                display: flex;
                flex-direction: column;
            }
            header{
                width: 100%;
                height: 200px;
                background-color: red;
                align-items: flex-start;
            }
            main{
                flex: 1;
                display: flex;
                width:100%;
            }
            .left{
                flex: 1;
                background-color: gold;
            }
            .right{
                flex: 4;
                background-color: greenyellow;
            }
            .innerfooter{
                width: 100%;
                height: 200px;
                background-color: aqua;
                align-items: flex-end;
            }
        
        </style>
    </head>
    <body>
        <div class="box">
            <header>header</header>
            <main>
                <div class="left">left</div>
                <div class="right">right</div>
            </main>
            <footer class="innerfooter">innerfooter</footer>
        </div>
    </body>
</html>